<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">
        <span style="font-weight: bold;font-size: 16px;font-family: 'Arial Black'">MyWind</span>
        <el-image style="width:30px;height: 30px" :src="headfc"></el-image>
      </el-menu-item>
      <el-submenu index="2" style="float: right">
        <template slot="title">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          {{ uname }}
        </template>
        <!--  <el-menu-item index="2-1" >退出</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>-->
        <el-menu-item index="2-1" @click="changeCollapse">切换模式</el-menu-item>
        <el-menu-item index="2-3" style="color: red" @click="exitUser">退出</el-menu-item>
      </el-submenu>


      <el-submenu index="3" style="float: right">

        <template slot="title">
          消息中心
        </template>
        <el-menu-item index="3-1" @click="showUpdateLog">
          更新日志
        </el-menu-item>
        <!--        <el-menu-item index="3-2">选项2</el-menu-item>-->
        <!--        <el-menu-item index="3-3">选项3</el-menu-item>-->

      </el-submenu>

      <el-dialog title="更新日志" :visible.sync="updateLogDialog" width="58%">


        <el-form :inline="true" :model="queryForm" class="demo-form-inline" size="mini">

          <el-form-item label="搜索时间">
            <el-date-picker
              v-model="queryForm.sssj"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyyMMddHHmmSS"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input v-model="queryForm.keyword" placeholder="关键词" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryLog" class="el-icon-search" size="mini"></el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="reset" class="el-icon-refresh" size="mini"></el-button>
          </el-form-item>
        </el-form>
        <div style="height: 310px;overflow: auto">
          <div class="block">
            <el-timeline>
              <el-timeline-item :size="index == 0?'large':'normal' " :color="index == 0?'#409eff':'#c5c4c4' "
                                v-for="(value,index) in updateLogMess" :key="value.id" :timestamp="value.create_time"
                                placement="top">
                <el-card>
                  <h4>版本号 {{ value.version_num }}</h4>
                  <pre style="overflow: auto" v-html="value.update_instructions">更新内容：<br>

                  </pre>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateLogDialog = false" size="mini">关闭</el-button>
        </div>
      </el-dialog>


    </el-menu>
  </div>

</template>

<script>
import headfc from 'svg/headfc.svg'
import {request} from 'network/request.js'


export default {
  name: "top",
  components: {},
  data() {
    return {
      headfc: headfc,
      uname: sessionStorage.getItem("uname"),
      updateLogMess: [],
      updateLogDialog: false,
      queryForm: {
        //时间
        sssj: [],
        //关键词
        keyword: '',
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  created() {

  },
  methods: {
    showUpdateLog() {
      let self = this
      request({url: '/webUpdateLog/queryUpdateLog'}).then(res => {
        self.updateLogDialog = true
        self.updateLogMess = res.data.data
      })
    },

    handleSelect(key, keyPath) {

    },

    queryLog() {
      let param = {
        keyword: this.queryForm.keyword,
        sssj: this.queryForm.sssj == "" ? "" : this.queryForm.sssj.toString()
      }
      let self = this
      request({
        url: '/webUpdateLog/queryUpdateLog',
        data: param
      }).then(res => {
        self.updateLogDialog = true
        if (res.data.data != null && self.queryForm.keyword != '' && self.queryForm.keyword != null) {
          res.data.data.forEach(item => {
            item.update_instructions =   item.update_instructions.replaceAll( self.queryForm.keyword,'<Strong style="color: #fa0c5f">' + self.queryForm.keyword + '</Strong>')
          })
        }
        self.updateLogMess = res.data.data
      })

    },
    reset() {
      Object.keys(this.queryForm).forEach(key => (this.queryForm[key] = ""))
    },
    exitUser() {
      this.$confirm('确认退出当前用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let self = this
        request({url: '/login/exitUser'}).then(res => {
          if (res.data.stateCode == '200') {
            self.$message.success(res.data.msg)
            sessionStorage.clear()
            self.$router.push({
              path: '/'
            })
          } else {
            self.$message.error(res.data.msg)
          }
        })

      })
    },
    //修改左侧导航条的模式
    changeCollapse() {
      this.$store.commit('changeCollapse')
    },
  }
}
</script>

<style scoped>


</style>
